上上回我們講到善用 CSS、javscript 能讓網頁有更好的使用者體驗，今天我們就透過使用 javascript 來為超陽春 Blog 增加一個小功能，來體會一下 javascript 的用途。

javascript 程式寫在哪裡

以新增文章頁的 new.html.erb 為例，我們可以在 HTML 標籤 <script> 中寫 javascript 的程式。另外有些 HTML tag 例如 <button> 可以綁定事件 onclick，用來設定按鈕被點的時候要做的事情。

這邊我們用 alert() 來示範，一進入新增文章頁就會執行 <script> 中的程式，所以會跳出一個警告視窗。在按下新增的按鈕時，會觸發綁在按鈕上面的 onclick 事件，也會跳出一個警告視窗。

<header>
  New Blog Post
</header>

<div class="content">
  <%= form_for :article, url: articles_path do |f| %>
    <p class="title-field">
      <%= f.label :title %>
      <%= f.text_field :title %>
    </p>
  
    <p class="content-field">
      <%= f.label :content %>
      <%= f.text_area :content %>
    </p>
  
    <p class="button">
      <%= f.submit %>
    </p>
  <% end %>

  <button onclick="alert('GGGGG')"> Don't click me</button>

</div>

<script>
  alert("GG")
</script>

檢查文章字數

資料庫儲存文章可能會有字數限制，如果不檢查就直接嘗試寫入的話，Server 端會回應錯誤代碼 500。我們可以用 javascript 在使用者按下送出文章的按鈕時，幫忙檢查一下字數上限，如果超過了就直接顯示錯誤。因為 javascript 在瀏覽器上執行，使用瀏覽器的運算資源，這樣一來，就不會送出請求給 Server 端，可以減輕 Server 端的負擔。

function checkContentLength(event) {
  var content = document.querySelector(".content-field textarea");
  if (content.textLength > 100) {
    console.log(event)
    alert("Content should be under 100 characters.");
  }
}